<template>
  <div class="indexFive">
    <h2>
      <i class="iconfont icon-huo mini"></i>
      <i class="iconfont icon-huo middle"></i>
      <i class="iconfont icon-huo "></i> 店长爆品推荐
      <i class="iconfont icon-huo "></i>
      <i class="iconfont icon-huo middle"></i>
      <i class="iconfont icon-huo mini"></i>
      <span class="more" v-if="popular.length > 3" @click="
        $router.push({
          path: '/summer',
        })
        ">更多<van-icon name="arrow" /></span>
    </h2>
    <!-- <van-icon name="hot" color="red" style="transform: scale(1.5);"/> -->

    <van-skeleton title :row="5" v-if="popular.length == 0" />
    <div id="indexFive-scroll" class="good-list" v-else>
      <div id="indexFive-begin" class="good-box">
        <div class="good-item" v-for="value in popular" :key="value.F_ProductId">
          <div class="good-card" @click="
            $router.push({
              path: '/product',
              query: {
                id: value.F_ProductId,
                parents_id: username,
              },
            })
            ">
            <img class="product-img lazy-img" :src="'http://higuang365.com/' + value.F_pic_url" />

            <div class="good-desc">
              <div class="county">
                <img v-if="value.F_yuliu2" class="county-icon lazy-img" :src="'http://higuang365.com/' + value.F_yuliu2"
                  alt="" />

                <div class="county-title">
                  {{ value.F_BrandCountrie }}
                </div>
              </div>

              <div class="title">{{ value.F_Name }}</div>
              <span class="price">¥ <span>{{ value.F_BdPrice }}</span></span>
              <span class="estimate" v-show="value.F_BdPrice != value.F_Price">{{ value.F_Price }}</span>
              <span class="share" @click.stop="addGoodsCart(value.F_yuliu3, value.F_ProductId)">
                <i class="iconfont icon-gouwuche1"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div id="indexFive-end" class="good-box"></div>
    </div>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs, nextTick } from "vue";
import { GetTagGoodsList } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
import { defineComponent } from "vue";
import { ScrollLeft } from "@/lib/expand";
export default defineComponent({
  setup() {
    const data = reactive({
      popular: [],
      username: getCookie("S[MEMBER]"),
    });
    const onLoad = async () => {
      const res = await GetTagGoodsList({
        pageNum: 1,
        pageSize: 15,
        tag_id: "39",
        strlv: getCookie("MLV"),
      });
      if (!res[0]) {
        const res = await GetTagGoodsList({
          pageNum: 1,
          pageSize: 9,
          tag_id: "39",
          strlv: getCookie("MLV"),
        });
        data.popular = res[1];
        return;
      }
      data.popular = res[1];
      nextTick(() => {
        const listScroll = new ScrollLeft(
          "indexFive-scroll",
          "indexFive-begin",
          "indexFive-end"
        );
        listScroll.start(15);
      });
    };
    const loadimg = (event: any) => {
      event.target.dataset.lazy = "loaded";
    };
    onLoad();
    return { ...toRefs(data), addGoodsCart, loadimg };
  },
});
</script>
<style lang="scss" scoped>
.indexFive {
  // h2 {
  //   font-size: 1.7rem;
  //   letter-spacing: 2px;
  //   padding: 0.5rem;
  //   margin: 0;
  //   border-bottom: 2px solid #f7f7f7;
  //   position: relative;
  //   i {
  //     color: red;
  //   }
  //   .icon-huo {
  //     font-size: 2rem;
  //   }
  //   .iconfont-min {
  //     font-size: 1.6rem;
  //   }

  //   .more {
  //     font-size: 1rem;
  //     position: absolute;
  //     top: 1rem;
  //     right: 0;
  //     font-weight: 500;
  //     color: #f15e5e;
  //   }
  // }
  h2 {
    font-size: 1.8rem;
    padding: 0.5rem;
    margin: 0;
    border-bottom: 2px solid #f7f7f7;
    position: relative;
    text-align: center;
    margin-bottom: 1rem;

    i {
      color: red;
    }

    .icon-huo {
      font-size: 2rem;
    }

    .mini {
      font-size: 1.4rem;
    }

    .middle {
      font-size: 1.7rem;
    }

    .more {
      font-size: 1rem;
      position: absolute;
      top: 1rem;
      right: 0;
      font-weight: 500;
      color: #f15e5e;
    }
  }

  .good-list {
    overflow: auto;
    white-space: nowrap;
  }

  .good-box {
    display: inline-flex;
    overflow: auto;
  }

  .good-item {
    box-sizing: border-box;
    animation: jello-horizontal 1s both;
    transition: all 1s;
  }

  .good-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 0 0.5rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
  }

  .product-img {
    display: block;
    width: 14rem;
    height: 14rem;
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
  }

  .good-desc {
    text-align: left;
    font-size: 1.2rem;
    padding: 1rem 0 0;
    position: relative;

    .county {
      display: flex;

      .county-icon {
        width: 2rem;
        height: 1.3rem;
      }

      .county-title {
        color: #999;
        margin-left: 0.5rem;
      }
    }

    .title {
      width: 10rem;
      font-size: 1.3rem;
      line-height: 2rem;
      color: #222333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .price {
      font-size: 1.3rem;
      color: #ff0036;
      font-weight: bold;
      line-height: 4rem;

      span {
        font-size: 1.7rem;
      }
    }

    .share {
      color: #3c8a58;
      position: absolute;
      right: 0.5rem;
      bottom: 1rem;
      z-index: 10;

      i {
        font-size: 2rem;
      }
    }

    .estimate {
      color: #c5c5c5;
      text-decoration: line-through;
      margin-left: 0.5rem;
    }
  }
}
</style>
